<template>
  <div class="fission-user table-theme">
    <el-card class="box-card">
      <div class="box-card-view">
        <head-title title="用户--裂变用户"></head-title>
        <div class="active-select">
          选择对应活动，获取数据：
          <el-select
            v-model="activity_id"
            placeholder="选择对应活动，获取数据"
            size="small"
            @change="init(1)"
          >
            <el-option
              v-for="item in activityList"
              :key="item.activity_id"
              :label="item.title"
              :value="item.activity_id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </el-card>

    <DataPanel :list="dataListy"></DataPanel>
    <el-card style="margin-top: 20px">
      <div class="fission-user-menu">
        <div class="fission-user-menu-left"></div>
        <div class="fission-user-menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p style="text-align: right; line-height: 30px">总数据数：{{ total }}</p>
      <el-table :data="fissionList">
        <el-table-column
          label="用户ID"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column
          label="用户名"
          align="center"
          prop="nickname"
        ></el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.heard_img"></ImgPopover>
          </template>
        </el-table-column>

        <el-table-column
          label="推荐人ID"
          align="center"
          prop="parent_id"
        ></el-table-column>
        <el-table-column
          label="利润"
          align="center"
          prop="profit"
        ></el-table-column>
        <el-table-column
          label="邀请人数"
          align="center"
          prop="invitation_count"
        ></el-table-column>
        <el-table-column
          label="分销订单数"
          align="center"
          prop="order_count"
        ></el-table-column>
        <el-table-column
          label="一级订单"
          align="center"
          prop="first_order_count"
        ></el-table-column>
        <el-table-column
          label="二级订单"
          align="center"
          prop="second_order_count"
        ></el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="addWrite(scope.row.user_id)"
              >{{
                scope.row.is_verification == 0 ? "设为核销员" : "取消核销员"
              }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import DataPanel from "@/components/activity-data-panel";
export default {
  components: {
    ImgPopover,
    DataPanel,
  },
  data() {
    return {
      admin_type: localStorage.getItem("admin_type"),
      activityList: [],
      activity_id: "",
      optionList: [
        {
          value: 0,
          label: "活动ID",
        },
      ],
      searchContent: "",
      classSelect: "",
      fissionList: [],
      total: 0,
      page: 0,
      dataListy: [],
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      if(!this.activityList.length){
        return;
      }
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        activity_id: this.activity_id,
      };
      if (this.admin_type != 1)
        data.store_id = localStorage.getItem("store_id");
      if (this.classSelect == 0 && this.searchContent != "") {
        data.activity_id = this.searchContent;
      }
      this.$http(this.$ApiList.ActivityUserList, data).then((res) => {
        this.fissionList = res.datas.data;
        this.total = res.datas.count;

        this.dataListy = [];
        this.dataListy.push({
          tips: "至少带来一个邀请人数的用户数",
          explain: "参与分销人数",
          num: res.datas.distribution_count,
          unit: "人",
        });
        this.dataListy.push({
          tips: "当前活动所有参与者累计邀请的总人数",
          explain: "受邀总人数",
          num: res.datas.invitation_count,
          unit: "人",
        });
        this.dataListy.push({
          tips: "该活动中至少收到了一笔返现的人数",
          explain: "分销出单人数",
          num: res.datas.order_count,
          unit: "人",
        });
        this.dataListy.push({
          tips: "当前活动用户累计所有用户分销的订单总数",
          explain: "分销订单总数",
          num: res.datas.distribution_order_count,
          unit: "笔",
        });
      });
    },
    // 搜素
    goSearch(type, value) {
      this.searchContent = value;
      this.classSelect = type;
      this.init();
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.searchContent = "";
      this.init();
    },
    getActivity() {
      let data = {
        page: 0,
        limit: 100,
      };
      if (this.admin_type != 1)
        data.store_id = localStorage.getItem("store_id");
      this.$http(this.$ApiList.ActivityList, data).then((res) => {
        this.activityList = res.datas.data;
        this.activity_id = res.datas.data[0].activity_id;
        this.init();
      });
    },
    addWrite(user_id) {
      let data = {
        activity_id: this.activity_id,
        user_id: user_id,
        store_id: localStorage.getItem("store_id"),
      };
      this.$http(this.$ApiList.BindingVerification, data).then((res) => {
        this.init(this.page);
      });
    },
  },
  created() {
    this.getActivity();
  },
};
</script>
<style lang="scss">
.fission-user {
  .box-card {
    margin-bottom: 20px;

    .el-card__body {
      padding: 10px 20px;

      .el-breadcrumb {
        margin-bottom: 0;
      }
    }

    .box-card-view {
      display: flex;

      .active-select {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .el-select {
          width: 400px;
        }
      }
    }
  }

  .fission-user-menu {
    display: flex;
  }

  .fission-user-menu .add {
    margin-left: 10px;
  }

  .fission-user-menu-left {
    flex: 1;
    display: flex;
  }

  .fission-user-menu-right {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
  }

  .fission-user-menu .search-view {
    margin-right: 10px;
  }
}
</style>
